<template>
    <div class="planList-index yuan-container">
        <a-spin tip="Loading..." :spinning="loading">
            <a-card v-if="planSimulationObj['包装计划']">
                <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                    <template v-for="item in typeArr">
                        <a-tab-pane :key="item.val" :tab="item.title" v-if="planSimulationObj[item.val].xuqiu>0"></a-tab-pane>
                    </template>

                </a-tabs>

                <!-- 包装计划 -->
                <div v-show="pageType==='包装计划'">
                    <PlanListBZVue ref="planListBZ" :planSimulation="planSimulationObj['包装计划']" :alarmData="alarmData"
                        @inputNumChange="inputNumChange" />
                </div>
                <!-- 制剂计划 -->
                <div v-show="pageType==='制剂计划'" v-if="planSimulationObj['制剂计划'].xuqiu>0">
                    <PlanListZJVue ref="planListZJ" :planSimulation="planSimulationObj['制剂计划']"
                        @inputNumChange="inputNumChange" />
                </div>
                <!-- 提取计划 -->
                <div v-show="pageType==='提取计划'" v-if="planSimulationObj['提取计划'].xuqiu>0">
                    <PlanListTQVue ref="planListTQ" :planSimulation="planSimulationObj['提取计划']"
                        @inputNumChange="inputNumChange" />
                </div>
                <!-- 饮片计划 -->
                <div v-show="pageType==='饮片计划'" v-if="planSimulationObj['饮片计划'].xuqiu>0">
                    <PlanListYPV2 ref="planListYP" :planSimulation="planSimulationObj['饮片计划']" @inputNumChange="inputNumChange" />
                </div>
            </a-card>
        </a-spin>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { h } from "vue";
import warningApi from "@/api/warningApi";
import { format, toDecimalNoZero } from "@/utils";
import { InputNumber } from "ant-design-vue";
import nextApi from "@/api/nextApi";
import PlanListBZVue from "./planListBZV2.vue";
import PlanListZJVue from "./planListZJV2.vue";
import PlanListTQVue from "./planListTQV2.vue";
import PlanListYPV2 from "./planListYPV2.vue";

@Component({
    name: "dom",
    components: { PlanListBZVue, PlanListZJVue, PlanListTQVue, PlanListYPV2 },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) planSimulation!: any;
    @Prop({ default: "" }) alarmData!: any;
    @Prop({ default: "" }) parentInfo!: any;

    @Watch("planSimulation")
    visibleChange() {
        this.pageInit();
    }
    planSimulationObj: { [key: string]: any } = {
        包装计划: null,
        制剂计划: null,
        提取计划: null,
        饮片计划: null,
    };
    loading = false;
    typeArr = [];
    pageType = "包装计划";
    tabChange(e: string) {
        this.pageType = e;
    }
    mounted() {
        this.pageInit();
    }
    pageInit() {
        this.pageType = "包装计划";
        if (this.planSimulation.length > 0) {
            const planSerial = this.getStorageBatch();
            this.typeArr = this.planSimulation.map((item, idx) => {
                item.planSerial = planSerial + "" + idx;
                const data = JSON.parse(JSON.stringify(item));
                if (item.planName === "包装计划") {
                    data.xuqiu = Number(data.num);
                }
                this.planSimulationObj[item.planName] = data;
                return { title: item.planName, val: item.planName };
            });
        }
    }

    getStorageBatch() {
        const time = new Date().getTime();
        let randomNumber: number | string = Math.floor(Math.random() * 100);
        // 如果随机数小于10，则在前面添加一个0
        if (randomNumber < 10) {
            randomNumber = "0" + randomNumber;
        }
        return format(time, "MMddhhmm" + randomNumber);
    }
    async inputNumChange(params) {
        this.getNeedNum({
            id: params.id,
            need: params.need,
            nextPlan: params.nextPlan,
        });
    }
    async getNeedNum(params: { id: string; need: number; nextPlan: string[] }) {
        try {
            this.loading = true;
            const res = await warningApi.getNeedNum({
                id: params.id,
                need: params.need,
            });
            params.nextPlan.forEach((item, idx) => {
                if (idx === 0) {
                    const nextData = JSON.parse(JSON.stringify(this.planSimulationObj[item]));
                    nextData.xuqiu = res.data;
                    nextData.preNeed = params.need;
                    this.planSimulationObj[item] = nextData;
                } else {
                    const nextData = JSON.parse(JSON.stringify(this.planSimulationObj[item]));
                    nextData.xuqiu = 0;
                    this.planSimulationObj[item] = nextData;
                }
            });
        } finally {
            this.loading = false;
        }
    }

    getPageInfo() {
        let validType = true;
        let errorTips = "";
        let processPlanDetailList: any[] = [];
        const processPlanDetailListBZ = (this.$refs["planListBZ"] as any)?.getPageInfo();
        const processPlanDetailListZJ = (this.$refs["planListZJ"] as any)?.getPageInfo();
        const processPlanDetailListTQ = (this.$refs["planListTQ"] as any)?.getPageInfo();
        const processPlanDetailListYP = (this.$refs["planListYP"] as any)?.getPageInfo();
        if (processPlanDetailListBZ===false || processPlanDetailListZJ===false || processPlanDetailListTQ===false || processPlanDetailListYP===false) {
            return false;
        }
        processPlanDetailList = processPlanDetailList
            .concat(processPlanDetailListBZ || [])
            .concat(processPlanDetailListZJ || [])
            .concat(processPlanDetailListTQ || [])
            .concat(processPlanDetailListYP || []);
        processPlanDetailList = processPlanDetailList.map((item) => {
            return { ...item, standard: this.parentInfo.standard };
        });

        if (!validType) {
            this.$message.error(errorTips);
            return false;
        }
        return processPlanDetailList;
    }
}
</script>
<style lang="scss">
.planList-index {
    .planList-top {
        font-size: 16px;
        padding-bottom: 10px;
    }
    .planList-title {
        font-weight: bold;
        font-size: 20px;
    }

    .overview-panel {
        background-color: #fff;
        padding: 10px 10px;
    }
    .overview-title {
        margin-right: 30px;
    }
    .overview-titlebox {
        padding: 10px 0;
    }
}
</style>
